<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<#include "../../common/header.html">

<style type="text/css">
.form-group  .checkbox {
	float: left;
	margin-top: 10px;
	margin-left: 10px;
}

/*
 * 解决高度塌陷问题clearfix
 */
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.clearfix {
	zoom: 1;
}
</style>

</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">

		<!-- 	顶部和左侧菜单的jsp s -->
		<#include "../../common/menu.html">
		<!-- 	顶部和左侧菜单的jsp e -->

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>充值</h1>
			</section>

			<!-- Main content -->
			<section class="content" style="padding-bottom: 0px;" id="content">
				<!-- general form elements -->
				<div class="box box-primary" style="width: 1000px; margin: 0 auto;">
					<div class="box-header with-border">
						<h3 class="box-title">充值信息</h3>
					</div>
					<!-- /.box-header -->
					<!-- form start -->
					<form action="/hicatcard/userCardRecharge/doUserCardRecharge"  method="post" id="roleForm"  enctype="multipart/form-data">
					   	    
							<div class="box-body">
										
							<div class="form-group">
								<input type="text" class="form-control" id="searchText"  placeholder="搜索会员名称，联系电话" />	
								<input type="button" value="搜索" id="searchButton"/>							
							</div>

							<!-- checkbox -->
							<div class="form-group clearfix" id="userList" >
							   <!-- <div class="checkbox">
									<label> Checkbox 2 </label>
								</div> 
								
								<div class="checkbox">
									<label> Checkbox 2 </label>
								</div> 
								<div class="checkbox">
									<label> Checkbox 2 </label>
								</div> 
								<div class="checkbox">
									<label> Checkbox 2 </label>
								</div>  -->
								
								<!-- aaaaa</br>
								aaaaa</br>
								aaaaa</br>
								aaaaa</br>
								aaaaa</br>
								aaaaa</br>
								aaaaa</br>
								aaaaa</br> -->
								
							</div>
							
							<div class="form-group" style="display: flex;justify-content:flex-start;  flex-wrap:wrap" id="choseCardCount">
								<!-- <div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="cardCount_1" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div>
								<div style="margin-bottom: 8px;margin-right: 10px;">
									<label for="phone" style="display: inline;">接收人手机号码</label> 
									<input type="text" class="form-control" id="phone" name="phone" style="display: inline; width: 200px" />
								</div> -->
						</div>
						
						<div class="form-group">
								<label for="remark">备注</label>
								<input type="text" class="form-control" id="remark" name="remark"/> 
						</div>
						
						<div class="form-group">
							<label for="userFile">批量导入</label>
							<input type="file" value="批量导入" name="userFile"/>	
							 <a href="/cloudpay/exceltemplate/import.xlsx" download="import.xlsx">下载模板</a>						
						</div>

						</div>
						<!-- /.box-body  @click="submit"-->
						<div class="box-footer">
							<button type="submit" class="btn btn-primary">提交</button>
							<button type="reset" class="btn btn-primary" >清空</button>
						</div>
					</form>
				</div>
				<!-- /.box -->
			</section>
			<!-- /.content -->
		</div>

	</div>
	<!-- ./wrapper -->
</body>
<script>
$(function() {
	//校验器
	var formValidator = $("#roleForm").validate({
				onkeyup : false,
				focusInvalid : false,  //错误时,错误选项不会得到焦点
				focusCleanup : true,   //得到焦点时，清空错误提示信息			
				rules : {},
				messages : {}
			});
	
	
		 $.ajax({
			 url : "/hicatcard/card/findAllCard",
			 type : "POST",			
			 success : function(result) {
				 var str = "";
				 $.each(result,function(i,n) {
						str += '<div style="margin-bottom: 8px;margin-right: 10px;">'
						    +      '<label for="phone" style="display: inline;">' + n.cardName + '</label> : '
						    +      '<input type="text" class="form-control" name="cardCount_' + n.cardId + '" style="display: inline; width: 200px" />'
						    +  '</div>';
				 });
				 
				$("#choseCardCount").html(str);
			 }, 
			 error:function (XMLHttpRequest, textStatus, errorThrown) {
		         alert("网络繁忙，请稍后再试");
		     },					
		 });	 
	
	
	$("#searchButton").click(function() {
		 $.ajax({
			 url : "/hicatcard/user/findByNicknameOrPhone",
			 type : "POST",
			 data : {searchText : $("#searchText").val()},						
			 success : function(result) {
				 var str = "";
				 $.each(result,function(i,n) {
					 var elem = $('input[value="' + n.userId + '"]');
					 if(elem.length == 0) {
						 str += '<div class="checkbox">'
						 	 +     '<label><input type="checkbox" style="margin-left: -15px" name="userIds" value="' + n.userId +  '">' + n.nickname + '(' + n.phone + ')</label>'
						 	 +  '</div>';
					 }				
				 });
				 
				$("#userList").append(str);
			 }, 
			 error:function (XMLHttpRequest, textStatus, errorThrown) {
		         alert("网络繁忙，请稍后再试");
		     },					
		 });	 
	});
	
	
});

</script>
</html>